<template>
  <div class="swipe">
    <van-swipe class="swipe-list" :autoplay="3000">
      <template v-for="(item, index) in housePics" :key="index">
        <van-swipe-item class="item">
          <img :src="item.url" alt="" />
        </van-swipe-item>
      </template>
      <template #indicator="props">
        <!-- <div class="indicator">{{ props.active + 1 }}/{{ props.total }}</div> -->
        <div class="indicator">
          <template v-for="(value, key, index) in swipeGroup" :key="key">
            <span 
              class="item" 
              :class="{ active: housePics[props.active]?.enumPictureCategory == key }"
            >
              <span class="text">{{ getName(value[0].title) }}</span>
              <span class="count" v-if="housePics[props.active]?.enumPictureCategory == key">
                :{{ getCategoryIndex(housePics[props.active]) }}/{{ value.length }}
              </span>
            </span>
          </template>
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<script setup>
import useDeatilStore from "@/stores/modules/detail";
import { storeToRefs } from "pinia";
import { computed } from "vue";

// 获取图片数据
const detailStore = useDeatilStore();
const { housePics } = storeToRefs(detailStore);  //state
// const housePics = computed(() => detailStore.housePics) //getter
// const { mainPart } = storeToRefs(detailStore)
// const housePics = computed(() => mainPart.value.topModule?.housePicture.housePics)
const swipeGroup = computed(() => detailStore.swipeGroup) //getter
// const props =  defineProps({
//     swipeData: {
//         type: Array,
//         default: () => []
//     }
// })
// const housePics = props.swipeData
// console.log("housePics", housePics);

// 对数据进行转换
// const swipeGroup = {};
// 2、方法2，一次遍历
// for (const item of housePics.value) {
//   let valueArray = swipeGroup[item.enumPictureCategory];
//   if (!valueArray) {
//     //第一次遍历是undefined
//     valueArray = [];
//     swipeGroup[item.enumPictureCategory] = valueArray;
//   }
//   valueArray.push(item);
// }
// console.log("swipeGroup", swipeGroup);

// 1、方法1，两次遍历，性能差
// 第一次遍历获取swipeGroup的enumPictureCategory，第二次遍历存入数据
// for ( const item of housePics.value){
//     swipeGroup[item.enumPictureCategory] = []   // "1": []
// }
// for ( const item of housePics.value){
//     const valueArray = swipeGroup[item.enumPictureCategory]
//     valueArray.push(item.value)
// }
// console.log("swipeGroup", swipeGroup);

// 定义转换数据的方法
const nameReg = /【(.*?)】/i
const getName = (name) => {
  // return name.replace("：", "").replace("】", "").replace("【", "")
  const results = nameReg.exec(name)
  return results[1]
}

const getCategoryIndex = (item) => {
  const valueArray = swipeGroup.value[item.enumPictureCategory]
  return valueArray.findIndex(data => data === item) + 1
}
</script>

<style lang="less" scoped>
.swipe {
  .swipe-list {
    .item {
      img {
        width: 100%;
      }
    }

    .indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      display: flex;
      padding: 2px 5px;
      font-size: 12px;
      color: #fff;
      background: rgba(0, 0, 0, 0.8);

      .item {
        margin: 0 3px;

        &.active {
          padding: 0 3px;
          border-radius: 5px;
          background-color: #fff;
          color: #333;
        }
      }
    }
  }
}
</style>